<template>
<div class="chart_box" :style="getchartStyle()" ref="mychart"></div>
</template>

<script>
const echarts = require('echarts');
export default {
    data() {
        return {}
    },
    props: {
        //接受图表尺寸配置
        chartConfig: {
            type: Object,
            required: true
        },
        //接受图表option的数据key
        chartkey: {
            type: String,
            required: true
        }
    },
    methods: {
        getchartStyle() {
            return 'width:' + this.chartConfig.width + ';height:' + this.chartConfig.height + ';'
        }
    },
    computed: {
        chart01Change() {
            return this.$store.state.chartOption[this.chartkey];
        }
    },
    watch: {
        chart01Change: {
            handler(newValue, oldValue) {
                var chart = echarts.init(this.$refs.mychart);
                chart.setOption(this.chart01Change);
                window.onresize = chart.resize;
            },
            deep: true
        }
    }
}
</script>

<style scoped>
.chart_box{
    background: #fff;
    border: 1px solid #dcdfe6;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
}
</style>
